{% extends "base.html" %}

{% block content %}
<div class="mb-6">
    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2"><i class="fa fa-list-ul"></i> 题库</h1>
    <p class="text-dark-2">选择一个问题开始解决</p>
</div>


<!-- 筛选器 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div class="flex flex-wrap gap-2">
            <span class="text-dark-2 font-medium">难度:</span>
            <button class="px-3 py-1 rounded-full bg-primary text-white text-sm difficulty-btn" data-difficulty="all">全部</button>
            <button class="px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm difficulty-btn hover:bg-light-2 transition-colors" data-difficulty="简单">简单</button>
            <button class="px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm difficulty-btn hover:bg-light-2 transition-colors" data-difficulty="中等">中等</button>
            <button class="px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm difficulty-btn hover:bg-light-2 transition-colors" data-difficulty="困难">困难</button>
        </div>
        <div class="w-full md:w-auto">
            <div class="relative">
                <input type="text" id="search-input" placeholder="搜索问题（仅匹配标题）..." 
                       class="form-input pl-4 pr-10 py-2 w-full md:w-64 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <div id="search-icon-container" class="absolute right-0 top-0 bottom-0 flex items-center pr-3 cursor-pointer">
                    <i id="search-icon" class="fa fa-search text-dark-2 transition-opacity duration-300"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 问题列表统计 -->
<div class="mb-4 text-dark-2 text-sm">
    <span id="problem-count">找到 {{ problems|length }} 个问题</span>
</div>

<!-- 问题列表 - 使用Grid布局确保对齐 -->
<div id="problems-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for problem in problems %}
    <div class="problem-card bg-white rounded-xl shadow-sm p-6 card-hover flex flex-col h-full" 
         data-difficulty="{{ problem.difficulty|lower }}"
         data-title="{{ problem.title|lower }}"
         data-description="{{ problem.description|lower }}">
        <!-- 标题和难度 -->
        <div class="flex justify-between items-start mb-4">
            <h2 class="text-xl font-semibold text-dark flex-grow">
                <a href="{{ url_for('problem_detail', problem_id=problem.id) }}" class="hover:text-primary transition-colors">
                    {{ problem.title }}
                </a>
            </h2>
            
            <!-- 难度标签 - 固定宽度 -->
            <div class="w-16 text-center">
                {% if problem.difficulty == "简单" %}
                <span class="px-3 py-1 rounded-full bg-success/10 text-success text-sm block">简单</span>
                {% elif problem.difficulty == "中等" %}
                <span class="px-3 py-1 rounded-full bg-warning/10 text-warning text-sm block">中等</span>
                {% else %}
                <span class="px-3 py-1 rounded-full bg-danger/10 text-danger text-sm block">困难</span>
                {% endif %}
            </div>
        </div>
        
        <!-- 描述区域 - 固定高度 -->
        <div class="text-dark-2 mb-6 h-24 overflow-hidden">
            <p class="line-clamp-3">{{ problem.description}}</p>
        </div>
        
        <!-- 底部状态信息 -->
        <div class="mt-auto">
            <div class="flex flex-wrap items-center gap-3">
                {% if problem.solved %}
                <span class="px-3 py-1 rounded-full bg-success/10 text-success text-sm flex items-center">
                    <i class="fa fa-check-circle mr-1"></i> 已解决
                </span>
                {% else %}
                <span class="px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm">未解决</span>
                {% endif %}
                
                <span class="px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm flex items-center">
                    <i class="fa fa-users mr-1"></i> {{ problem.submissions|length }} 提交
                </span>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<script>
    // 当前筛选状态
    let currentDifficulty = 'all';
    let currentSearchTerm = '';
    
    // DOM元素
    const problemCards = document.querySelectorAll('.problem-card');
    const problemCountElement = document.getElementById('problem-count');
    const searchInput = document.getElementById('search-input');
    const searchIcon = document.getElementById('search-icon');
    const searchIconContainer = document.getElementById('search-icon-container');
    
    // 难度筛选按钮事件
    document.querySelectorAll('.difficulty-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            // 更新按钮样式
            document.querySelectorAll('.difficulty-btn').forEach(b => {
                b.classList.remove('bg-primary', 'text-white');
                b.classList.add('bg-light-1', 'text-dark-2');
            });
            btn.classList.remove('bg-light-1', 'text-dark-2');
            btn.classList.add('bg-primary', 'text-white');
            
            // 更新筛选状态
            currentDifficulty = btn.dataset.difficulty;
            filterProblems();
        });
    });
    
    // 搜索输入事件
    searchInput.addEventListener('input', (e) => {
        currentSearchTerm = e.target.value.toLowerCase().trim();
        
        // 控制搜索图标的显示/隐藏
        if (currentSearchTerm.length > 0) {
            searchIcon.classList.add('opacity-0');
            searchInput.classList.add('pr-4');
            searchInput.classList.remove('pr-10');
        } else {
            searchIcon.classList.remove('opacity-0');
            searchInput.classList.remove('pr-4');
            searchInput.classList.add('pr-10');
        }
        
        filterProblems();
    });
    
    // 搜索框聚焦/失焦事件
    searchInput.addEventListener('focus', () => {
        if (searchInput.value.trim().length > 0) {
            searchIcon.classList.add('opacity-0');
            searchInput.classList.add('pr-4');
            searchInput.classList.remove('pr-10');
        }
    });
    
    searchInput.addEventListener('blur', () => {
        if (searchInput.value.trim().length === 0) {
            searchIcon.classList.remove('opacity-0');
            searchInput.classList.remove('pr-4');
            searchInput.classList.add('pr-10');
        }
    });
    
    // 点击搜索图标触发搜索
    searchIconContainer.addEventListener('click', () => {
        if (currentSearchTerm.length > 0) {
            filterProblems();
        }
    });
    
    // 筛选问题函数（仅匹配标题）
    function filterProblems() {
        let visibleCount = 0;
        
        problemCards.forEach(card => {
            const difficulty = card.dataset.difficulty;
            const title = card.dataset.title; // 仅使用标题进行匹配
            
            // 难度筛选
            const matchesDifficulty = currentDifficulty === 'all' || difficulty === currentDifficulty;
            // 标题筛选（移除描述匹配）
            const matchesSearch = currentSearchTerm === '' || title.includes(currentSearchTerm);
            
            if (matchesDifficulty && matchesSearch) {
                card.classList.remove('hidden');
                visibleCount++;
            } else {
                card.classList.add('hidden');
            }
        });
        
        // 更新问题计数
        problemCountElement.textContent = `找到 ${visibleCount} 个问题`;
    }
</script>
{% endblock %}